// This component is responsible for adding a divider line below itself,
// including the necessary spacing. It assumes that any element that follows it
// does not have any top margin (see grid-margin-overrides.scss).
.ltp-toc {
    background-color: $blue-5;
    border: 1px solid $blue-20;
    padding: 48px 24px;
    margin: 40px 0px 97px; // odd number to make space for the 1px bottom border of the pseudo-element positioned halfway below
    row-gap: 16px;
    display: grid;
    align-items: flex-start;
    position: relative;

    &::after {
        content: "";
        position: absolute;
        bottom: -50px; // round(margin-bottom (97) / 2) + border-width of ltp-toc (1)
        left: 0;
        right: 0;
        border-bottom: 1px solid $blue-10;
    }

    @include sm-only {
        margin: 24px 0 81px; // odd number to make space for the 1px bottom border of the pseudo-element positioned halfway below
        padding: 24px;
        &::after {
            bottom: -42px; // round(margin-bottom (81) / 2) + border-width of ltp-toc (1)
        }
    }
}

.ltp-toc__primary,
.ltp-toc__secondary {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.ltp-toc__title {
    @include h2-bold;
    color: $blue-90;
    margin: 0;

    @include sm-only {
        @include h3-bold;
        margin: 0;
    }
}

.ltp-toc__primary-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.ltp-toc__primary-item {
    display: flex;
    align-items: flex-start;
    @include body-2-regular;

    @include sm-only {
        @include body-3-regular;
    }

    svg {
        width: 13px;
        height: 13px;
        flex-shrink: 0;
        margin-right: 8px;
        margin-top: 6px;
        color: $vermillion;
    }
}

.ltp-toc__primary-link {
    color: $blue-90;
    text-decoration: none;

    &:hover {
        text-decoration: underline;
    }
}

.ltp-toc__secondary {
    margin-top: 4px;
    @include sm-only {
        margin-top: 24px;
    }
}

.ltp-toc__secondary-title {
    @include h5-black-caps;
    color: $blue-65;
    margin: 0;
}

.ltp-toc__secondary-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.ltp-toc__secondary-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    column-gap: 16px;
    padding: 16px;
    background-color: $white;
    border: 1px solid $blue-10;
    text-decoration: none;
    transition: border-color 0.125s ease;
    cursor: pointer;

    &:hover {
        border-color: $blue-30;
    }
}

.ltp-toc__secondary-card-content {
    display: flex;
    align-items: center;
    column-gap: 16px;
}

.ltp-toc__secondary-card-icon {
    width: 46px;
    height: 46px;
    border-radius: 1.32px;
    background-color: $blue-5;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: $blue-60;
    font-size: 16px;
}

.ltp-toc__secondary-card-title {
    @include h3-bold;
    margin: 0;
    color: $blue-90;
}
.ltp-toc__secondary-card-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.ltp-toc__secondary-card-description {
    @include note-13-medium;
    color: $blue-65;
}

.ltp-toc__secondary-card-arrow {
    color: $blue-90;
    font-size: 16px;
}
